<template>
  <div>
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,i) in picList" :key="i"><img :src="item.imageUrl"></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
import { swiper,swiperSlide } from 'vue-awesome-swiper';
require('swiper/dist/css/swiper.css');
import axios from 'axios';
export default {
  name: "Inswipe", // 此处不能用Swiper作为name，否则报错
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination", // 轮播图的点
        loop:true, // 循环
      },
      picList:[
        {imageUrl:require("../assets/imgs/banner.png"),},
        {imageUrl:require("../assets/imgs/banner.png")},
        {imageUrl:require("../assets/imgs/banner.png")},
        {imageUrl:require("../assets/imgs/banner.png")}
      ],
      Shop: [

        {
          name: "新西兰佳沛黄金奇异果",
          num: "6只装",
          price: "礼拜五价 : ",
          money: "¥ 28.80",
          src: require("../../assets/imgs/猕猴桃.png"),
        },
        {
          name: "新西兰佳沛黄金奇异果",
          num: "6只装",
          price: "礼拜五价 : ",
          money: "¥ 28.80",
          src: require("../../assets/imgs/肉.png"),
        },
        {
          name: "新西兰佳沛黄金奇异果",
          num: "6只装",
          price: "礼拜五价 : ",
          money: "¥ 28.80",
          src: require("../../assets/imgs/草莓.png"),
        },
        {
          name: "新西兰佳沛黄金奇异果",
          num: "6只装",
          price: "礼拜五价 : ",
          money: "¥ 28.80",
          src: require("../../assets/imgs/虾.png"),
        }
      ]

      
    };
  },
  components:{
      swiper,
      swiperSlide
  },
  // mounted(){
  //   axios.get('/api/small/commodity/v1/bannerShow').then(res=>{
  //     this.picList = res.data.result;
  //   });
  // }
};
</script>
<style scoped>
.wrapper >>>.swiper-pagination-bullet-active{
    background: #4b943d !important;
}
/* 图片100% */
.swiper-slide img {
    width: 1920px;
    height: 500px;
}
</style>